<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/themes/icon.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<title></title>

<script type="text/javascript">
	$(function() {

		//数据表格
		$('#dg').datagrid({
			url : '${pageContext.request.contextPath}/findaddress',
			columns : [ [ {
				field : 'e_number',
				title : '编号',
				width : 100
			}, {
				field : 'e_name',
				title : '姓名',
				width : 100
			}, {
				field : 'e_sex',
				title : '性别',
				width : 100
			}, {
				field : 'dept_name',
				title : '所属部门',
				width : 100
			}, {
				field : 'e_tel',
				title : '电话',
				width : 100
			}, {
				field : 'e_email',
				title : '邮箱',
				width : 100
			}, {
				field : 'e_address',
				title : '地址',
				width : 100
			} ] ],
			pagination : true,
			striped : true,
			singleSelect : true,
			toolbar : '#tb',
		});

		//下拉框一
		$("#box1").combobox({
			textField : 'value',
			width : 120,
			panelHeight : 100,
			data : [ {
				value : '全部查询'
			}, {
				value : '分类查询'
			}, {
				value : '精确查询'
			} ],
			onSelect : function() {
				var boxtext = $("#box1").combobox("getText");
				if (boxtext == "全部查询") {
					$("#search").hide();
					$("#searchbox2").hide();
					$("#searchbox3").hide();
					$("#searchbox4").hide();
					$("#dg").datagrid("load", {});
				} else if (boxtext == "分类查询") {
					$("#search").hide();
					$("#searchbox2").attr("style", "display:inline;")
				} else {
					$("#searchbox2").hide();
					$("#searchbox3").hide();
					$("#searchbox4").hide();
					$("#searchinput").searchbox("clear");
					$("#search").attr("style", "display:inline;float: right;");
				}
			}
		});

		//下拉框组合
		$('#box2').combobox({
			valueField : 'id',
			textField : 'text',
			width : 120,
			panelHeight : 100,
			data : [ {
				id : 1,
				text : '按部门查询'
			}, {
				id : 2,
				text : '按性别查询'
			} ],
			onSelect : function(rec) {
				$("#searchbox3").attr("style","display:inline");
				if (rec.id == 1) {
					$("#box3").combobox("setValue","请输入类型");
					$("#searchbox4").hide();
					var url = '${pageContext.request.contextPath}/getdept';
					$('#box3').combobox('reload', url);
				}
				if (rec.id == 2){
					$("#box4").combobox("setValue","请输入类型");
					$("#searchbox3").hide();
					$("#searchbox4").attr("style","display:inline");
				}
			}
		});
		
		$('#box3').combobox({
			valueField : 'id',
			textField : 'text',
			width : 120,
			panelHeight : 100,
			onSelect:function(rec){
				var deptid = rec.id;
				$("#dg").datagrid("load",{
					"deptid" : deptid,
				})
			},
		});
		
		$('#box4').combobox({
			valueField : 'id',
			textField : 'text',
			width : 120,
			panelHeight : 100,
			data:[{
				id : 1,
				text : "男",
			},{
				id : 2,
				text : "女",
			}],
			onSelect:function(){
				var sex = $("#box4").combobox("getText");
				$("#dg").datagrid("load",{
					"sex" : sex,
				})
			},
		});

		
		
	});

	//搜索框
	function doSearch(value) {
		$("#dg").datagrid("load", {
			"value" : value,
		});
		$("#searchinput").searchbox("clear");
	}
</script>

</head>
<body>


	<!-- 数据表格 -->
	<table id="dg" style="width: 702px;"></table>
	<!-- 工具栏 -->
	<div id="tb">

		<!-- 下拉列表框 -->
		<input id="box1" value="请选择查询方式" editable="false">
		<!-- 分类下拉列表框组合 -->
		<div id="searchbox2" style="display: none;">
			<input id="box2" class="easyui-combobox" value="请选择类型" editable="false" /> 
		</div>
		<div id="searchbox3" style="display: none;">
			<input id="box3" name="box3" class="easyui-combobox" editable="false" />
		</div>
		<div id="searchbox4" style="display: none;">
			<input id="box4" class="easyui-combobox" editable="false" />
		</div>

		<!-- 搜索框 -->
		<div id="search" style="display: none;">
			<input id="searchinput" class="easyui-searchbox"
				data-options="prompt:'请输入  员工编号/员工姓名',searcher:doSearch"
				style="width: 250px;">
		</div>
	</div>

</body>
</html>